<#include "../../common/_header.htm">
<div class="content-wrapper" style="margin-left: 0px">
        <section class="content">
                <div id="call_frequency" >
                    <div class="stream_search" >
                        <el-form :inline="true" ref="call_Form" :model="form" class="demo-form-inline">
                            <el-form-item label="对方号码">
                                <el-input v-model="form.PARTY_NUMBER" placeholder="对方号码"></el-input>
                            </el-form-item>
                            <el-form-item label="通话次数>=">
                                <el-input v-model="form.FREQUENCY_COUNT" placeholder="通话次数"></el-input>
                            </el-form-item>
                            <el-form-item class="form_z" label="时间范围">
                                <el-date-picker
                                        v-model="form.begin_time"
                                        name="beginTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item class="el-form-item" label="至">
                                <el-date-picker
                                        v-model="form.end_time"
                                        name="endTime"
                                        type="date"
                                >
                                </el-date-picker>
                            </el-form-item>
                            <div class="zcdcon">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">分析</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button  @click="clear()">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="daobtn" @click="exportExcel">导出</el-button>
                            </el-form-item>
                            </div>
                        </el-form>
                    </div>
                    <div class="callanalysis-detail-head">
                        <div class="casemanage-switchtip">
                            <div class="casemanage-list" :class="{active:showType===0}" @click="showType=0"  title="切换为列表显示">
                                <i class="casemanage-switchtip-list"></i><span>列表</span>
                            </div>
                            <div class="casemanage-relative" @click="show()"  title="切换为D3显示">
                                <i class="casemanage-switchtip-d3"></i><span>图表</span>
                            </div>
                            <div class="casemanage-map" @click="showMap()"  title="切换为地图显示">
                                <i class="casemanage-switchtip-map"></i><span>地图</span>
                            </div>
                        </div>
                    </div>
                    <div class="stream_body" >

                        <div v-show="showType===0">
                            <table id="dg"></table>
                        </div>
                </div>
        </section>
    </div>
    <script>
	    var caseId=parent.caseId;
		$(document).ready(function(){
			 $(window).resize(function(){
				$('#dg').datagrid('resize',{
                    height:($(window).height())-($('.stream_search').outerHeight(true))-40,
                });
			});
		});
        //d3弹窗
        function show(){
            call_frequency.getlist_d3();
        }
        //地图弹窗
        function showMap(){
            call_frequency.getMap();
        }
        let call_frequency=new Vue({
            el:"#call_frequency",
            data:{
                typeOptions:[
                    {
                        value: '0',
                        label: '主叫'
                    }, {
                        value: '1',
                        label: '被叫'
                    }
                ],
                showType:0,
                form: {
                    PARTY_NUMBER: '',
                    FREQUENCY_COUNT: '',
                    begin_time:"",
                    end_time:"",
                },
            },
            methods: {
                changeMap(){
                    this.showType=2;
                    if(arr){
                        this.getMap();
                    }
                },
                onSubmit() {
                    _checkedCallback()
                },
                clear(formName){
                    this.form={
                        PARTY_NUMBER: '',
                        FREQUENCY_COUNT: '',
                        begin_time:"",
                        end_time:"",
                    }
                },
                exportExcel(){
                    if(arr){
                        let a = "FREQUENCY_COUNT="+this.form.FREQUENCY_COUNT+"&PARTY_NUMBER="+this.form.PARTY_NUMBER+"&begin_time="+getMyDate(this.form.begin_time)+"&end_time="+getMyDate(this.form.end_time)+"&SERVICE_NUMBER="+arr+"&CASEMANAGE_ID="+caseId;
                        window.location.href="${ctx}/callanalysis/export/frequency?"+a;
                    }
                },
                getMap(){
                   var data = {
                        SERVICE_USER_INFORMATION:this.form.SERVICE_USER_INFORMATION,//对方姓名
                        PARTY_NUMBER: this.form.PARTY_NUMBER,// 对方号码
                        FREQUENCY_COUNT:this.form.FREQUENCY_COUNT,//次数
                        begin_time: getMyDate(this.form.begin_time),// 开始时间
                        end_time: getMyDate(this.form.end_time),// 结束时间
                        SERVICE_NUMBER:arr,
                        CASEMANAGE_ID:caseId
                   }
                   var d = top.dialog({
                        title : '通话频率地图',
                        modal : true,
                        data : data,
                        url : '${ctx}/callanalysis/frequencyMap',
                        height : 800,
                        width : 1500,
                        onshow : function () {
                        }
                   });
                   d.show();
                   return false;
                },
                getlist_d3(){
                	var data = {
                            SERVICE_USER_INFORMATION:this.form.SERVICE_USER_INFORMATION,//对方姓名
                            FREQUENCY_COUNT:this.form.FREQUENCY_COUNT,//次数
                            PARTY_NUMBER: this.form.PARTY_NUMBER,// 对方号码
                            begin_time: getMyDate(this.form.begin_time),// 开始时间
                            end_time: getMyDate(this.form.end_time),// 结束时间
                            SERVICE_NUMBER:arr,
                            CASEMANAGE_ID:caseId,
                            reqUrl : '${ctx}/callanalysis/detail_d3'
                    }
                	var d = top.dialog({
                        title : '通话频率分析关系图',
                        modal : true,
                        data : data,
                        url : '${ctx}/callanalysis/callAnalysisD3Init',
                        height : 800,
                        width : 1500,
                        onshow : function () {
                    	}
                    });
                    d.show();
                	return false;
                },
            }
        })

        var arr=""
        _checkedCallback()
        function _checkedCallback() {
            if(parent.parent._checkedPhone.length>0){
                var temArr=deepClone(parent.parent._checkedPhone);
                for (let i = 0; i < temArr.length; i++) {
                    if (temArr[i].indexOf("'")==-1) {
                        temArr[i]="'"+temArr[i]+"'"
                    }
                }
                arr =temArr.toString()
                dg()
            }else{
                arr=""
                dg()
            }
        }
        function detailDialog(PARTY_NUMBER,PARTY_LOCATION,SERVICE_NUMBER) {
            var param = {
                CASEMANAGE_ID:caseId,
                PARTY_NUMBER:PARTY_NUMBER,// 对方号码
                PARTY_LOCATION:PARTY_LOCATION,
                SERVICE_NUMBER:SERVICE_NUMBER,// 主叫号码
                begin_time:getMyDate(call_frequency.form.begin_time),// 开始时间
                end_time:getMyDate(call_frequency.form.end_time),// 结束时间
            };
            var d = top.dialog({
                title : '通话频率分析详情',
                modal : true,
                url : '${ctx}/phone/record/compeopledetailDialog',
                height : 700,
                width : 1500,
                data : param,
                onshow : function () {
                }
            });
            d.show();
            return false;
        }
        /*-----------------------easyui表格-----------------------------*/
        /** 页面初始化完成 **/
        function dg(){
            $('#dg').datagrid({
                url: '${ctx}callanalysis/frequency_easyui',
                method: 'post',
                queryParams:{//每次请求的参数
                    serviceUserInformation:call_frequency.form.SERVICE_USER_INFORMATION,//对方姓名
                    partyNumber: call_frequency.form.PARTY_NUMBER,// 对方号码
                    frequencyCount:call_frequency.form.FREQUENCY_COUNT,
                    beginTime: getMyDate(call_frequency.form.begin_time),// 开始时间
                    endTime: getMyDate(call_frequency.form.end_time),// 结束时间
                    serviceNumber:arr,
                    caseId:caseId
                },
                height:($(window).height())-($('.stream_search').outerHeight(true))-40,
                pageSize:30,
                pageList:[30,50,100,150,200],
                pageNumber:1,//当前页号,

                loadMsg:"正在加载，请稍后",//加载数据时的提示信息
                emptyMsg:"暂无信息",//加载数据为空时的信息
                //height: 710,
                rownumbers:true,//序号
                fitColumns: true,//使表格自适应页面宽度
                pagination: true,//是否分页
                singleSelect: true,
                columns:[[ //每一列的具体设置。
                    {field:'SERVICE_NUMBER',title:'主叫号码'},
                    {field:'PARTY_NUMBER',title:'对方号码'},
                    {field:'PARTY_LOCATION',title:'对方归属地'},
                    {field:'COUNT',title:'通话次数', sortable : true,
                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引 PARTY_NUMBER,PARTY_LOCATION,SERVICE_NUMBER
                            let PARTY_NUMBER = row.PARTY_NUMBER?row.PARTY_NUMBER:'';
                            let PARTY_LOCATION = row.PARTY_LOCATION?row.PARTY_LOCATION:'';
                            let SERVICE_NUMBER = row.SERVICE_NUMBER?row.SERVICE_NUMBER:'';
                            return '<a href="#" onclick="detailDialog(\''+PARTY_NUMBER+"\',\'"+PARTY_LOCATION+'\',\''+SERVICE_NUMBER+'\')">'+value+'</a>'
                        }
                    },
                    {field:'SUM_TALK_TIME',title:'总时长', sortable : true},
                    {field:'AVG_TALK_TIME',title:'平均时长', sortable : true},
                    {field:'BEIGIN_TIME',title:'开始日期', sortable : true,
                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm');
                        }
                    },
                    {field:'END_TIME',title:'结束日期', sortable : true,
                        formatter: function(value,row,index){ //当前值，当前的row，当前的索引
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm');
                        }
                    }
                ]],
                onHeaderContextMenu: function(e, field){
                    e.preventDefault();
                    if (!cmenu){
                        createColumnMenu();
                    }
                    cmenu.menu('show', {
                        left:e.pageX,
                        top:e.pageY
                    });
                },
                onLoadSuccess: function(){
                    console.log("刷新了")
                }
            });
        }
    </script>
<script src="${ctx}/bower_components/easyui/common/titleHide.js"></script>
    <style>
        .casemanage-switchtip div:hover {
            background-color: #4595ec;
            color: #fff;
        }
        .casemanage-switch .casemanage-list i{
            width: 20px;
            height: 16px;
        }
        .casemanage-list {
            line-height: 35px;
            color: #fff;

        }
        .casemanage-switch.casemanage-switchcon{
            position: fixed;
            right: -10px;
            top: 10px;
        }
        .casemanage-relative{
            line-height: 35px;
        }
        .casemanage-switch .casemanage-map i{
            width: 20px;
            height: 20px;
        }
        .casemanage-map{
            line-height: 35px;
        }
        span.plist {
            position: absolute;
        }
        button.el-button.daobtn.el-button--primary{
            background-color: #23B7E5;
            border-color: #23B7E5;
        }
        .zcdcon {
            display: inline-block;
        }
        input.el-input__inner{
            width: 120px;
            height: 30px;
        }
        button.el-button.el-button--primary{
            width: 70px;
            height: 30px;
            line-height: 8px;
            margin-right: -5px;
        }
        button.el-button.el-button--default{
            width: 70px;
            height: 30px;
            line-height: 8px;
            margin-right: -5px;
        }
        .el-form-item {
            margin-bottom: -20px;
        }
        #hidebg-map {
            position:absolute;
            left:0px;
            top:0px;
            background-color:#000;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=60);  /*设置透明度为60%*/
            opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
            display:none;
            z-Index:999;
        }
        #hidebox-map {
            text-align: right;
            position:absolute;
            width: 96%;
            height: 82%;
            top: 23px;
            left: 2%;
            border-radius: 5px;
            background-color:#fff;
            display:none;
            z-Index:9999;
            padding: 10px;
        }
        div#hidebox-mContent {
            width: 100%;
            height: 96%;
        }
        .outAccount_d3_head {
            float: left;
            font-size: 20px;
            margin-bottom: 5px;
        }
        #hidebox span{
            font-size: 20px;
        }
        svg {
            height: 96%;
            width: 100%;
        }
        .casemanage-relative:focus {
            border-color: #4695ed;
        }
        .el-table.el-table--fit.el-table--striped.el-table--enable-row-hover {
            border-radius: 4px;
        }
        .el-form-item.form-z {
            margin-right: 7px !important;
        }
        .el-form--inline .el-form-item__label{
            font-size: 13px;
            font-weight: 400;
        }
        .el-input__inner{
            font-size: 12px;
        }
        .stream_search{
            margin: 8px 0 -25px 0;
        }
        .content {
            padding: 10px;
        }
        .el-form-item__label{
            color: #6f7689;
        }
        .el-form--inline .el-form-item{
            margin-top: -11px;
            margin-bottom: 10px;
        }
        .el-button{
            padding: 8px 15px;
            width: 70px;
            height: 32px;
            margin-right: -15px;
        }
        .el-button:focus, .el-button:hover {
            background-color: #e7e7e7;
            border-color: #adadad;
        }
        button.el-button.el-button--default:hover {
            color: #333;
        }
        button.el-button.el-button--default:focus {
            color: #333;
        }
        .el-button:active {
            border-color: #adadad;
            background-color: #e7e7e7;
        }
        .el-button--primary{
            background-color:#4695ed;
            border-color:#4695ed;
        }
        .el-button--primary:focus, .el-button--primary:hover{
            background: #61a8f5;
            border-color: #61a8f5;
        }
        .casemanage-switch .casemanage-list{
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .el-input__inner{
            border-color: #D2D6DE;
            border-color: #e4e4e4;
        }
        .el-input__inner:hover{
            border-color:#4695ed;
        }
        .el-input__inner:focus{
            border-color:#4695ed;
        }
        .el-select:hover .el-input__inner{
            border-color:#4695ed;
        }
        .el-dialog--small {
            width: 95%;
            margin-top: 68px;
            height: 76%;
        }
        .el-pagination {
            font-weight: 400;
            margin-top: 10px;
        }
        .el-dialog__headerbtn{
            font-size: 20px;
            top: 30px;
            right: 30px;
        }
        .el-dialog__header {
            margin-top: 15px;
        }
        table.el-table__body {
            width: 100%!important;
        }
        table.el-table__header {
            width: 100%!important;
        }
    </style>
